<template>
  <div class="box-column container-grid">
    <ux-header-search
      ref="searchHeader"
      v-bind="enquiryData"
      :btnsData="{ permissionsData }"
      @search="onQueryClick"
    ></ux-header-search>
    <div class="box-flex1 table">
      <vxe-grid
        v-bind="tableConfig"
        :data="dataStore.data"
        :columns="table.columns"
      >
        <template v-slot:operate="{ row }">
          <ux-btn-group
            :btns="table.btns"
            :data="{ row, permissionsData }"
          ></ux-btn-group>
        </template>
      </vxe-grid>
    </div>
    <div class="pagination-el box-row box-center-end">
      <el-pagination
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        :current-page="dataStore.proxy.page"
        :page-size="dataStore.proxy.pageSize"
        :page-sizes="dataStore.pageSizes"
        :total="dataStore.pagination.total"
        :layout="'total, sizes, prev, pager, next, jumper'"
      ></el-pagination>
    </div>
    <dialogForm
      ref="dialogForm"
      @submitSuccess="onSubmitSuccess"
      @closeDialog="onCloseDialog"
    ></dialogForm>
    <dialogOperation
      ref="dialogOperation"
      @submitSuccess="onSubmitSuccess"
      @closeDialog="onCloseDialog"
    ></dialogOperation>
    <idAuthOpenForm
      ref="idAuthOpenForm"
      @submitSuccess="onSubmitSuccess"
      @closeDialog="onCloseDialog"
    ></idAuthOpenForm>
  </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter, State } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import { mixinAccess } from "@/mixin/Access";
import dialogForm from "./Edit.vue";
import dialogOperation from "./Operation.vue";
import idAuthOpenForm from "./IdAuthOpen.vue";
@Component({
  name: "equipmentDoorHome",
  mixins: [
    mixinTableStore,
    mixinTableHeader,
    mixinTableOperation,
    mixinDialogFormParent,
    mixinAccess,
  ],
  components: {
    dialogForm,
    dialogOperation,
    idAuthOpenForm,
  },
})
export default class equipmentDoorHome extends Vue {
  @Action("equipmentDoor/del") itemDel: any;
  @Action("equipmentDoor/list") getList: any;
  // 获取全部
  @Action("equipmentDoorGroup/all") getGroup: any;
  @Getter("equipmentDoorGroup/all") groupData: any;
  @State((state) => state.sharing.netType) doorNetData: any;
  @State((state) => state.sharing.doorDirect) doorDirectData: any;
  @State((state) => state.sharing.onLineStatusData) onLineStatusData: any;

  mounted() {
    this.getGroup();
  }
  dataStore: any = {
    proxy: {
      defaultParams: { door_space: 1 },
    },
  };
  table: any = {
    btns: [
      {
        label: "编辑",
        condition: ["permissionsData.edit"],
        handleClick: (this as any).onEditClick,
      },
      {
        label: "删除",
        condition: ["permissionsData.del"],
        handleClick: (this as any).onDelClick,
      },
      {
        label: "门禁指令",
        condition: ["permissionsData.remote"],
        enabledCondition: [
          function ({ row }) {
            if (row.door_status == 1) {
              return true;
            }
            return false;
          },
        ],
        param: "dialogOperation",
        handleClick: (this as any).onEditClick,
      },
    ],
    // 列配置
    columns: [
      {
        fixed: "left",
        width: 70,
        type: "seq",
        title: "序号",
      },
      {
        fixed: "left",
        min: 100,
        title: "门禁名称",
        field: "door_name",
      },
      {
        fixed: "left",
        width: 130,
        title: "门禁GUID",
        field: "door_guid",
      },
      {
        title: "在线状态",
        field: "door_status",
        width: 80,
        params: "onLineStatusData",
        formatter: (this as any).formatterData,
        className: function ({ row }) {
          return ["", "green ", "red"][row.door_status];
        },
      },
      {
        width: 80,
        title: "联网方式",
        field: "line_way",
        params: "doorNetData",
        formatter: (this as any).formatterData,
      },
      {
        width: 150,
        title: "归属门禁组",
        field: "group_name_str",
      },
      {
        min: 200,
        title: "门禁功能",
        field: "func_name",
      },
      {
        title: "授权数量",
        width: 90,
        field: "scrip_count",
      },
      {
        width: 80,
        title: "安装方向",
        field: "door_direct",
        params: "doorDirectData",
        formatter: (this as any).formatterData,
      },
      {
        showOverflow: "ellipsis",
        fixed: "right",
        slots: { default: "operate" },
        title: "操作",
        width: 200,
      },
    ],
  };
  // 查询头下拉数据配置
  headerSelectList: any = [
    {
      dataName: "onLineStatusData",
      keyName: "door_status",
    },
  ];
  // 查询头配置
  enquiryData: any = {
    searchBtn: {
      condition: ["permissionsData.query"],
    },
    fields: [
      {
        field: "door_name",
        label: "门禁名称",
      },
      {
        field: "door_guid",
        label: "门禁GUID",
      },
      {
        label: "在线状态",
        fieldType: "select",
        field: "door_status",
      },
    ],
    btns: [
      {
        label: "新增",
        class: "btn-blue",
        icon: "el-icon-plus",
        condition: ["permissionsData.add"],
        handleClick: (this as any).onAddClick,
      },
    ],
  };
  treeParams: any = {
    label: "group_name",
  };
}
</script>
